<template>
	<view class="pdb-50">
		<view class='order-container' v-if="orderPop" catchtouchmove="true">
			<view class='order-pop'>
				<image src='/static/images/close.png' @tap='orderClose' class='order-pop-close'></image>
				<image src='http://aliyun.oss.zxgyzj.com/video/b7d73b664a74efe55a2873f797fadfe.png' class='order-pop-img'></image>
			</view>
		</view>

		<view class='order-detail-container'>
			<view class='order-detail-wrap'>
				<view class='order-title dp-flex'>
					<text class='order-verify yellow-color font48'>诚信担保信息</text>
				</view>

				<view class='order-detail-body'>

					<view class='order-detail-item'>
						<view class='font48 yellow-color'>工作地点</view>
						<view class='order-detail-item-right font48' @tap='onNavigate'>
							<view>{{list.work_province_id}}{{list.work_city_id}}{{list.work_district_id}}</view>

						</view>
					</view>
					<view class='order-detail-item font48'>
						<view class='yellow-color'>施工内容</view>
						<view class='order-detail-item-right'>
							{{list.work_description}}
						</view>
					</view>
					<view class='order-detail-item font48'>
						<view class='yellow-color'>发布日期</view>
						<view class='order-detail-item-right'>
							{{list.created_at}}
						</view>
					</view>

					<view class='order-detail-item'>
						<view class='order-detail-item-left'>现场照片</view>
					</view>
					<view class='order-detail-item'>
						<view class='order-detail-body'>
							<view class='my-pic-container' v-if="list.poster.length != 0">
								<view v-for="(item,index) in list.poster" class="my-pic-wrap" @tap="previewImage" :id="item">
									<image :src="item" mode="aspectFill" />
								</view>
							</view>
							<view v-else class='order-detail-item-left'>
								雇主没有上传照片~
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class='video' @tap='goVideo'>

				<image class="video-back" src='https://gy-files.oss-cn-shenzhen.aliyuncs.com/images/order-video-back1.gif'></image>
			</view>

			<view class='publisher-container dp-flex-y-center'>

				<view class='publisher-right dp-flex-col'>
					<button v-if="orderStatusID == 1" class="weui-btn mini-btn" type="warn" size="mini" :data-tel="list.contact_mobile"
					 @tap='onCallBossTap'>联系雇主</button>
				</view>

			</view>
			<view class="block-line-box">
				<navigator url="/pages/index/index" open-type="switchTab" class="block-line-btn">
					<image class='block-line-btn-img' src="/static/images/order.gif"></image>查看其它订单
				</navigator>
				<button class="block-line-btn" open-type='contact' @tap='bindJIshuzhichiPhone'>
					<image src="/static/images/service.gif"></image>联系平台客服
				</button>
			</view>
			<view class='end-order'>
				<view class='end-orderZi' @tap='orderWithMoney'>达成合作意向后，请到我联系过的页面:【申请结束订单】</view>
				<view class='end-orderZi ' open-type='share'>如果您不需要接这个单，请转发到您的微信群或好友，非常感谢<image src="https://gy-files.oss-cn-shenzhen.aliyuncs.com/small_img/baoquan.png"></image>
				</view>

			</view>

		</view>




		<view class='order-detail-fixed-bar'>

			<button class="fixed-normal-btn" @tap='orderWithMoney'>
				<image class='fixed-normal-btn-img' src='/static/images/tel.gif'></image>
				<text>联系雇主</text>
			</button>
			<button class="fixed-normal-btn" @tap='phoneindex'>
				<image src='https://gy-files.oss-cn-shenzhen.aliyuncs.com/job-want/index_logo.png'></image>
				<text>首页</text>
			</button>

			<button class="fixed-normal-btn" open-type='share' @tap='bomWxShare'>
				<image src='https://gy-files.oss-cn-shenzhen.aliyuncs.com/picture/share.gif'></image>
				<text>推荐给朋友</text>
			</button>
		</view>
	</view>


	<!-- 	<view v-if="mainCat && list.status === '已结束'" class='complaint' @tap='onComplaint'>投诉</view>
	<navigator class="fixed-operation-box" open-type="switchTab" url='/pages/index/index'>
		<image src="/static/images/tabbar/index-choose.png"></image>
		<view>返回首页</view>
	</navigator> -->

	<!-- 	<share-modal isShow="{{isShareModal}}" content="{{content}}"></share-modal>
	
	<auth-modal isShow="{{isShowAuthModal}}" bindopenMobileModal="openMobileModal"></auth-modal>
	<phone-modal isShow="{{isShowPhoneModal}}" bindgetPhoneCallback="getPhoneCallback"></phone-modal> -->
</template>

<script>
	import app from '@/App.vue';
	import {
		GYZJMODEL as gyzjModel
	} from '@/utils/gyzjModel.js'
	export default {
		onLoad: function(options) {
			this.options = options;
			this.id = options.id;
			let that=this;
			console.log('onLoad开始进来');
			console.log('onLoad开始的值',app.globalData.userInfo);
			if(app.globalData.userInfo==='NULL'||!app.globalData.userInfo&&app.globalData.token){
				/*刚开始进来执行了全局userInfo*/
				console.log('刚开始全局userInfo');
				that.main_getUserInfo(app.globalData.token,1).then(res=>{
					app.globalData.userInfo=res.data.user;
				});
				
				// app.globalData.userInfo=that.main_getUserInfo(app.globalData.token,1);
			}
		},
		onShow: function(options) {
			let id = this.options.id;
			console.log('进来show的id', id);
			this.getOrderDetail(id);
		},
		data() {
			return {
				list: {},
				starLevel: [],
				id: '', // 订单详情id
				mainCat: '',
				subCat: '',
				orderStatus: '',
				orderStatusID: 0,
				userInfo: {},
				userWorkOrder: {}, // 当前订单已雇佣工人列表
				showCmtBtm: false, // 设置只有发单人才显示回复按钮
				isShareModal: false,
				content: "",
				isShowAuthModal: false,
				isShowPhoneModal: false,
				orderPop: false,
				options: '', //options传递过来的值
				interval: '', //定时器
				intervalEnd: '',
			}
		},
		methods: {
			/*微信分享*/
			bomWxShare:function(){
				console.log('测试');
				// #ifdef APP-PLUS
				// let arr=this.main_getGlobal();
				// this.main_is_login(arr);
				// if(arr.token=='0739'){
				// 	return false;
				// }
				console.log('this.userInfo',this.userInfo);
				let wx_id=this.main_config_wx_id;
				console.log('wx_id的值',wx_id);
				let imageUrl='/static/allAvatar.png';
				let title=app.globalData.userInfo.name||app.globalData.userInfo.nickName+':向你推荐了一个装修订单，请速点查看……';
				let path='pages/order-lists/order-detail/order-detail?id='+this.id;
				gyzjModel.prototype.shareLink(title,imageUrl,wx_id,path);
				// #endif
			},
			//联系客服
			  bindJIshuzhichiPhone: function() {
			    uni.makePhoneCall({
			      phoneNumber: this.main_config_phone
			    })
			  },
			// 获取订单详情
			getOrderDetail: function(id) {
				uni.showLoading();
				gyzjModel.prototype.getfreshOrderDetail(id).then(data => {
					switch (data.code) {
						case 1:
							uni.hideLoading();
							data.data.start_time = data.data.start_time.substr(0, 10) //截掉时间
							const starLevel = gyzjModel.prototype.convertToStarsArray(data.data.user.score_level);
							this.list = data.data;
							this.starLevel = starLevel;
							this.userWorkOrder = data.data.userWorkOrder;
							if (data.data.user.id == app.globalData.userInfo.id) {
								this.showCmtBtm = true;
							}
							if (this.mainCat && data.data.is_comment === 1) {
								this.orderStatus = '已评价';
								this.orderStatusID = 8;
							}
							break;
						default:
							uni.showToast({
								title: data.message,
								icon: 'none'
							});
							break;
					}
				});
			},

			// 直接联系雇主
			onCallBossTap: function(e) {
				const tel = e.currentTarget.dataset.tel;
				uni.makePhoneCall({
					phoneNumber: tel,
				})
			},

			/*没有开通会员的拨打电话*/
			orderWithMoney() {
				let arr=this.main_getGlobal();
				console.log('arr的值',arr);
				this.main_is_login(arr);
				if(arr.token=='0739'){
					return false;
				}
				console.log('执行了app.globalData',app.globalData);
				/*appGlobalData可能为空*/
				let userInfo = app.globalData.userInfo;
				
				console.log('开通会员得到了userInfo',userInfo);
				let _this = this;

				if (userInfo.type == 1) {
					/*如果没有电话填写电话入驻,有电话进入驻页,0739进登录页*/
					if(userInfo.mobile=='0739'){
						gyzjModel.prototype.showUserModal('../../login/login-select/login-select');
					}else if(userInfo.mobile==''){
						gyzjModel.prototype.showUserModal('../../ads/fill-phone/fill-phone');
					}else{
					    gyzjModel.prototype.showUserModal('../../vip-info/vip-info');
					}
					return
				};
				console.log('userInfo的信息');
				console.log(userInfo);
				// let theTime=new Date().getTime();
				// console.log(theTime);
				// let subTheTime=theTime.substr(0,10);
				let subTheTime = Math.round(new Date().getTime() / 1000).toString();
				console.log(subTheTime);
				if (userInfo.viplever_id > 0 && userInfo.expiry_time > subTheTime) {
					console.log('开通了会员时间没有过可以拨打电话');
					uni.makePhoneCall({
						phoneNumber: _this.list.contact_mobile,
					})
					return
				} else if (userInfo.viplever_id > 0 && userInfo.expiry_time < subTheTime) {
					console.log('开通了会员时间过了不能拨打电话');
					uni.showModal({
						content: '您的会员年费已经到期，请您及时续费',
						confirmColor: '#F94C48',
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/user-center/vip-card/vip-card?id='+_this.id,
								})
							}
						}
					})
				} else {
					console.log('没有开通会员充钱拨打电话');
					console.log('用户money',userInfo.money);
					if (+userInfo.money <= 0) {
						uni.showModal({
							title: '积分不足',
							content: '当前积分不足！请先充值，或开通钻石会员~',
							confirmText: "钻石会员",
							confirmColor: '#f94c48',
							cancelText: "临时充值",
							cancelColor: '#f94c48',
							success(res) {
								console.log('刚进来的执行');
								if (res.confirm) {
									console.log('1刚进来的执行');
									uni.navigateTo({
										url: '../../user-center/vip-card/vip-card?id='+_this.id,
									})
								} else {
									console.log('2刚进来的执行');
									uni.navigateTo({
										url: '../../user-center/my-account/money-in/money-in?id='+_this.id,
									})
								}
							}
						})
						return
					}
					let number=5-userInfo.score_level;
					
					uni.showModal({
						title: '【装修业务信息共享】',
						content: '拨打订单电话需消耗' +number+ ' 个积分/次。',
						showCancel: true,
						success(res) {
							if (res.confirm) {
								let postData = {
									work_order_id: _this.id
								}
								gyzjModel.prototype.postOrderWithMoney(arr.token, arr.type,postData).then(data => {
									let code = data.code;
									switch (code) {
										case 1:
											console.log('成功的执行');
											uni.makePhoneCall({
												phoneNumber: data.data.mobile,
												success() {
													app.globalData.userInfo.money = +app.globalData.userInfo.money - (5 - +userInfo.score_level)
												}
											})
											break;
										default:
											uni.hideLoading();
											if (data.message == "积分不足") {
												console.log('取消的执行');
												uni.navigateTo({
													url: '../../user-center/my-account/money-in/money-in?id='+_this.id,
												})
												uni.showModal({
													title: '积分不足',
													content: '当前积分不足！请先充值，或开通钻石会员~',
													confirmText: "钻石会员",
													confirmColor: '#f94c48',
													cancelText: "临时充值",
													cancelColor: '#f94c48',
													success(res) {
														if (res.confirm) {
															console.log('积分的开始执行');
															uni.navigateTo({
																url: '../../user-center/vip-card/vip-card?id='+_this.id,
															})
														} else {
															console.log('积分的结束执行');
															uni.navigateTo({
																url: '../../user-center/my-account/money-in/money-in?id='+_this.id,
															})
														}
													}
												})

											} else if (data.message == "您尚未入驻,无法拨打雇主的电话") {
												uni.showModal({
													title: '提示',
													content: '您尚未入驻,无法拨打雇主的电话',
													success(res) {
														if (res.confirm) {
															uni.navigateTo({
																url: '/pages/vip-info/vip-info?id=' + _this.id,
																// url: '/pages/index/index',
															})
														}
													}
												})
											} else {
												console.log('失败的执行');
												uni.showModal({
													title: '提示',
													content: data.message,
												})
											}
											break;
									}
								});
							}
						}
					})
				}

			},

			// 打开导航
			onNavigate: function() {
				if (this.list.latitude == 0 && this.list.longitude == 0) {
					return uni.showToast({
						title: '该订单地点暂不支持导航',
						icon: 'none',
						duration: 2500,
					});
				}
				uni.openLocation({
					longitude: this.list.longitude ? +this.list.longitude : 40,
					latitude: this.list.latitude ? +this.list.latitude : 40,
					scale: 18
				})
			},

			// 联系客服
			relationCustomer: function() {
				uni.makePhoneCall({
					phoneNumber: '13007421866',
				})
			},
			//放大图片
			previewImage: function(e) {
				uni.previewImage({
					current: e.currentTarget.id, // 当前显示图片的http链接
					urls: this.list.poster // 需要预览的图片http链接列表
				})
			},
			//查看视频
			goVideo: function() {
				uni.navigateTo({
					url: '/pages/user-center/news-detail/news-detail?id=' + 20,
				})
			},
			//回到首页
			phoneindex: function(e) {
				uni.switchTab({
					url: '/pages/index/index',
				})
			},
		}
	}
</script>

<style>
	@import url("../../../static/style/app.css");
.publisher-container {
  background-color: #fff;
  /* border-top:10upx solid #EEE; */
}

.publisher-left image {
  width: 160upx;
  height: 160upx;
  border-radius: 50%;
}

.publisher-left {
  margin: 30upx 0 30upx 30upx;
}

.publisher-info {
  padding-left: 20upx;
  justify-content: space-around;
}

.publisher-verify {
  padding-left: 20upx;
  font-size: 12px;
  color: #f94c48;
}

.publisher-right {
  margin-right: 30upx;
}

/* 详情 */
.order-detail-container {
  background-color: #fff;
}

.order-detail-wrap {
  /* margin: 0upx 30upx; */
  margin-bottom: 0;
}
.block-line-box{
  display: flex;
  padding:30upx 20upx;
  /* border-top:40upx solid #EEE; */
  justify-content: space-around;
}
.block-line-btn{
  background: white;
  font-size: 34upx;
  margin:0;
  color:#333;
  font-style: italic;
  border:4upx solid #f94c48;
  line-height: 72upx;
  text-align: center;
  display: inline-block;
  border-radius: 16upx;
  padding:0upx 20upx;
  opacity: 1;
}
.comment-btn {
  display:inline-block;
  padding:10upx 40upx;
  background-color: #f94c48;
  color: #fff;
  border-radius: 10upx;
  font-size: 32upx;
}
.block-line-btn image{
  width: 50upx;
  height: 44upx;
  margin-right: 10upx;
  vertical-align: middle;
}
.block-line-btn .block-line-btn-img {
  width: 45upx;
  height: 50upx;
}

.order-title {
  position: relative;
  justify-content: space-between;
  align-items: center;
  padding: 20upx 30upx;
}

.order-verify {
  color: #f28520;
}

.order-title::after {
  content: " ";
  position: absolute;
  left: 0;
  right: -30upx;
  height: 1px;
  color: #e5e5e5;
  z-index: 2;
  bottom: 0;
  border-bottom: 1px solid #e5e5e5;
}

.order-type {
  font-size: 18px;
  color: #f94c48;
}

.order-detail-body {
  padding: 20upx 0;
  padding-bottom: 0;
}

.order-detail-item {
  /* display: flex; */
  padding: 0 30upx;
  padding-bottom: 20upx;
}

.order-detail-item-left {
  /* flex: 1.7; */
  color: #666;
}

.order-detail-item-right {
  /* flex: 3; */
  /* padding-left: 60upx; */
}
.order-detail-item:nth-child(2) .order-detail-item-right{
text-indent: 106upx;
}
.border-radius {
  border: 1px solid #f94c48;
  padding: 2upx 20upx;
  margin-right: 20upx;
  background-color: #fff;
  color: #f94c48;
  border-radius: 20px;
  font-size: 14px;
}

/* 相册 */
.my-pic-container {
  display: flex;
  flex-wrap: wrap;
  margin-right: -18upx;
  margin-top: 20upx;
}

.my-pic-wrap {
  width: 216upx;
  height: 216upx;
  margin-right: 18upx;
  margin-bottom: 18upx;
}
.my-pic-wrap:nth-child(3n){
  margin-right: 0;
}
.my-pic-wrap image {
  width: 216upx;
  height: 216upx;
}

/* 抢单按钮 */
.order-detail-fixed {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 100upx;
  line-height: 100upx;
  background: #f94c48;
  color: #fff;
  text-align: center;
  font-size: 40upx;
}

.publisher-left .icon-star {
  width:36upx;
  height:36upx;
}

/* 联系雇主 */
.order-detail-fixed-bar {
  display: flex;
  backgrond-color:white!important;
}
.end-order {
  /* border-top:40upx solid #EEE; */
  background-color: #EEE;
  display: flex;
}
.end-orderZi {
 
  
font-size: 30upx;
width:50%;

}
.end-orderZi:nth-child(1) {
  padding:2%;
  border-right: 1px solid white;
}
.end-orderZi:nth-child(2) {
   border-right: 0upx;
 padding:2% 0;
   padding-left:4%;
  
}
.end-orderZi image{
  width: 50upx;
  height: 44upx;
  margin-right: 10upx;
  vertical-align: middle;
}
.fixed-normal-btn {
  height: 100upx;
  display: flex;
  align-items: center;
}
.fixed-normal-btn:nth-child(2) {
  /* border-right: none; */
  margin: 0upx auto;

}
.fixed-normal-btn .fixed-normal-btn-img {
  width: 60upx;
  height: 60upx;
}
.fixed-normal-btn {
  width:33%;
  padding: 0upx;

}
.fixed-normal-btn:last-child{
  width:34%;
}
.mr-5 {
  margin-right: 5px;
}

.complaint {
  position: fixed;
  right: 5px;
  top: 40%;
  width: 100upx;
  height: 100upx;
  line-height: 100upx;
  text-align: center;
  background-color: #f94c48;
  border-radius: 50%;
  color: #fff;
  box-shadow: 0 0 5px #ccc;
}

/* 导航地图图标 */
.location-wrap {
  float: left;
  color: #f28520;
  border: 1px solid #f28520;
  padding: 0 10upx;
  border-radius: 5px;
  margin-top: 2px;
}

.loc-img {
  width: 30upx;
  height: 30upx;
}

.video {
  width: 100%;
  height: 140upx;
  margin-top: 30upx;
  position: relative;
}
.video > .video-back {
  width: 100%;
  height: 100%;
}
.video > .video-gif {
  position: absolute;
  left: 50%;
  top: 10%;
  width: 18%;
  height: 85%;
  transform: translateX(-50%);
}

.order-detail-face {
  margin-left: 20upx;
  color: #009900;
}

.order-container {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 99;
}

.order-pop {
  width: 80%;
  height: 28%;
  position: fixed;
  top: 20%;
  left: 10%;
}
.order-pop .order-pop-img {
  width: 100%;
  height: 100%;
}
.order-pop-close {
  width: 60upx;
  height: 60upx;
  position: absolute;
  top: -20upx;
  right: -20upx;
}

.font48 {
  font-size: 52upx;
}
.cut-off {
  padding: 10upx 20upx 0 20upx;
  display: flex;
  background-color: #999;
  margin: 20upx 0;
}
.cut-off-left {
  color: #f94c48;
  font-size: 48upx;
  margin-right: auto;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  line-height: 60upx;
}
.cut-off-right {
  display: flex;
  flex-direction: column;
  color: #fff;
  padding-bottom: 8upx;
}
.cut-off-right-dial {
  display: flex;
}
.dial {
  background-color: #f94c48;
  padding: 0upx 10upx;
  font-size: 28upx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 10upx;
  border-radius: 10upx;
}



</style>
